<script >
export default {
  name:"Stars",
  props:{
    value:{type:Number,default:3},
    total:{type:Number,default:5},
  },
  methods:{
    clk(num){
      if (this.value===num){
        this.value=0;
      }else {
        this.value=num;

      }
      //分布事件，名必须是input
      this.$emit("input",this.value)
    }
  }
}
</script>

<template>
<span>
  <i v-for="x in total"  :class="{
    'el-icon-star-on':x<=value,
    'el-icon-star-off':x>value
  }" @click="clk(x)"
  ></i>


</span>
</template>

<style scoped>
i{
  cursor: pointer;
}
</style>
